<template>
  <table class="data-table">
    <thead>
      <tr>
        <th>过程</th>
        <th>生产输出</th>
        <th>产品存储</th>
        <th>运输过程</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td>{{ row.process }}</td>
        <td>{{ row.productionOutput }}</td>
        <td>{{ row.productStorage }}</td>
        <td>{{ row.transport || row.volatileResult || row.total || '' }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
defineProps({
  data: Array
});
</script>

<style scoped>
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th, .data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.data-table th {
  background-color: #e6f7e6;
  color: #2e7d32;
  font-weight: bold;
}

.data-table tr:hover {
  background-color: #f5f5f5;
}
</style>